<template>
  <div class="tu-date-box">
    <div class="tu-left-icon">
      <el-icon>
        <Calendar />
      </el-icon>
    </div>
    <div class="tu-left-date">
      <el-date-picker
        v-model="tuLeftModel"
        v-bind="dateOption"
        style="width: 100%;"
        :placeholder="searchItem?.itemAttrs?.placeholder?.[0] || ''"
        :disabled-date="(date: Date) => leftDateDisabled(date)"
        @change="rangeChange"
      />
    </div>
    <div class="tu-center-icon">
      -
    </div>
    <div class="tu-right-date">
      <el-date-picker
        v-model="tuRightModel"
        v-bind="dateOption"
        style="width: 100%;"
        :placeholder="searchItem?.itemAttrs?.placeholder?.[1] || ''"
        :disabled-date="(date: Date) => rightDateDisabled(date)"
        @change="rangeChange"
      />
    </div>
    <div
      class="tu-right-icon"
      @click="clearDate"
    >
      <el-icon>
        <CircleClose />
      </el-icon>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
import type { SearchItemType } from '../../TableType';
import { Calendar, CircleClose } from '@element-plus/icons-vue'

const props = defineProps<{
  searchItem: SearchItemType
}>()

const emits = defineEmits<{
  (e: 'rangeChange', data: string[], propName: string): void
}>()

const tuLeftModel = ref('')
const tuRightModel = ref('')

tuLeftModel.value = props.searchItem.defaultValue?.[0] || ''
tuRightModel.value = props.searchItem.defaultValue?.[1] || ''

// 默认配置
const defaultOption = {
  type: 'date',
  format: 'YYYY-MM-DD',
  'value-format': 'YYYY-MM-DD'
}

// 固定配置
const fiexdOption = {
  clearable: false,
  'prefix-icon': "none"
}

// 合并属性
const dateOption = {
  ...defaultOption,
  ...(props?.searchItem?.itemAttrs || {}),
  ...fiexdOption
}

// 左侧时间范围禁用
const leftDateDisabled = (date: Date) => {
  if (tuRightModel.value) {
    return date.getTime() > new Date(tuRightModel.value).getTime()
  } else {
    return false
  }
}

// 右侧时间范围禁用
const rightDateDisabled = (date: Date) => {
  if (tuLeftModel.value) {
    return date.getTime() < new Date(tuLeftModel.value).getTime() - 1000 * 60 * 30 * 24
  } else {
    return false
  }
}

// 时间选择事件
const rangeChange = () => {
  emits('rangeChange', [tuLeftModel.value, tuRightModel.value], props.searchItem.prop)
}

// 清空选项
const clearDate = () => {
  tuLeftModel.value = ''
  tuRightModel.value = ''
}

// 重置时间范围
const resetFields = () => {
  tuLeftModel.value = props.searchItem.defaultValue?.[0] || ''
  tuRightModel.value = props.searchItem.defaultValue?.[1] || ''
}

defineExpose({
  resetFields
})
</script>

<style scoped lang='scss'>
.tu-date-box {
  display: flex;
  width: 100%;
  height: 32px;
  line-height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 11px;

  .tu-left-icon {
    color: #a8abb2;
    width: 22px;
    text-align: center;
    line-height: 32px;
  }

  .tu-center-icon {
    width: 20px;
    padding: 0 6px;
    text-align: center;
    background-color: #fff;
  }

  .tu-left-date {
    width: calc(50% - 35px);
    font-size: 0;

    :deep(.el-input__wrapper) {
      box-shadow: none;
      padding: 0 11px;
      height: 30px;
    }

    :deep(.el-input__inner) {
      text-align: center;
    }

    :deep(.el-input__prefix) {
      display: none;
    }
  }

  .tu-right-date {
    width: calc(50% - 35px);
    font-size: 0;

    :deep(.el-input__wrapper) {
      box-shadow: none;
      padding: 0 11px;
      height: 30px;
    }

    :deep(.el-input__inner) {
      text-align: center;
    }

    :deep(.el-input__prefix) {
      display: none;
    }
  }

  .tu-right-icon {
    color: #a8abb2;
    width: 22px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }
}
</style>